<template>
  <div class="progress-item">
    <div class="key">{{ k }}</div>
    <div class="main">
      <p class="name">{{ name }}</p>
      <div class="progress">
        <div class="in" :style="{ width: `${v}%` }"></div>
      </div>
    </div>
    <div class="val">{{ v }}%</div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: "合格率",
    },
    k: {
      type: String,
      default: "3d",
    },
    v: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
  watch: {
    v: {
      handle() {},
    },
  },
};
</script>
<style scoped lang='scss'>
.progress-item {
  display: flex;
  color: #fff;
  align-items: center;
  margin-bottom: vh(17px);
  .key {
    width: vh(32px);
    height: vh(32px);
    background: rgba(73, 239, 255, 0.5);
    border-radius: vh(8px);
    font-family: Source Han Sans CN;
    font-size: vh(14px);
    color: #ffffff;
    text-align: center;
    line-height: vh(32px);
    margin-right: vw(13px);
    background: url("~@/assets/concreteScreen/historical_assessment.png");
    background-size: 100% 100%;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      margin: 0;
    }
    .name {
      font-family: Source Han Sans CN;
      font-size: vh(14px);
      color: #b3b3b3;
      margin-bottom: vh(7px);
    }
    .progress {
      height: vh(10px);
      .in {
        width: vw(178px);
        height: vh(10px);
        background: linear-gradient(
          -90deg,
          #ffc44f 0%,
          rgba(255, 196, 79, 0) 100%
        );
        border-radius: vh(5px);
        transition: all 0.2s ease-out;
      }
    }
  }
  .val {
    font-family: D-DIN-PRO;
    font-weight: bold;
    font-size: vh(18px);
    color: #d5f9fa;
    margin-left: vw(7px);
  }
}
</style>
